<template>
  <view class="my">
    <view
      class="hearder"
      :style="{ paddingTop: safeAreaInsets!.top + 60 + 'px' }"
    >
      <view class="overview" v-if="userStore.userInfo">
        <image
          :src="
            userStore.userInfo.avatar
              ? userStore.userInfo.avatar
              : 'https://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-06/db628d42-88a7-46e7-abb8-659448c33081.png'
          "
          class="avatar"
        />
        <view class="meta">
          <view class="nickname">
            {{ userStore.userInfo.username }}
          </view>
          <view class="introduction">
            {{
              userStore.userInfo.introduction
                ? `个人简介：${userStore.userInfo.introduction}`
                : "暂无简介"
            }}
          </view>
        </view>
      </view>
      <view class="overview" v-else>
        <navigator url="/pages/login/login" hover-class="none">
          <image
            class="avatar gray"
            mode="aspectFill"
            src="https://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-06/db628d42-88a7-46e7-abb8-659448c33081.png"
          ></image>
        </navigator>
        <view class="meta">
          <navigator
            url="/pages/login/login"
            hover-class="none"
            class="nickname"
          >
            未登录
          </navigator>
          <view class="extra">
            <text class="tips">点击登录账号</text>
          </view>
        </view>
      </view>
    </view>
    <view class="content">
      <view class="manage">
        <navigator
          url="/pages/my/manage/vote"
          open-type="navigate"
          hover-class="navigator-hover"
          class="manage-item"
        >
          <image
            class="manage-icon"
            src="/static/images/vote_manage.png"
            style="background-color: #fb8966"
          ></image>
          <text class="manage-text">投票管理</text>
        </navigator>
        <navigator
          url="/pages/my/manage/participation"
          open-type="navigate"
          hover-class="navigator-hover"
          class="manage-item"
        >
          <image
            class="manage-icon"
            style="background-color: #76a1ff"
            src="/static/images/participation.png"
          ></image>
          <text class="manage-text">我参与的</text>
        </navigator>
        <navigator
          url="/pages/my/manage/apply"
          open-type="navigate"
          hover-class="navigator-hover"
          class="manage-item"
        >
          <image
            class="manage-icon"
            src="/static/images/apply_for.png"
            style="background-color: #4bd5b1"
          ></image>
          <text class="manage-text">我的申请</text>
        </navigator>
      </view>
      <view class="setting">
        <navigator
          url="/pages/my/manage/draft"
          open-type="navigate"
          hover-class="navigator-hover"
          class="setting-item"
        >
          <view class="setting-content">
            <image src="/static/images/draft_box.png" class="setting-icon" />
            <text class="setting-text">草稿箱</text>
          </view>
          <image src="/static/images/right.png" class="setting-right-icon" />
        </navigator>
        <!-- <navigator
          url="/pages/my/manage/recycle"
          open-type="navigate"
          hover-class="navigator-hover"
          class="setting-item"
        >
          <view class="setting-content">
            <image src="/static/images/recycle_bin.png" class="setting-icon" />
            <text class="setting-text">回收站</text>
          </view>
          <image src="/static/images/right.png" class="setting-right-icon" />
        </navigator> -->
        <navigator
          url="/pages/my/other/setting"
          open-type="navigate"
          hover-class="navigator-hover"
          class="setting-item"
        >
          <view class="setting-content">
            <image src="/static/images/setting.png" class="setting-icon" />
            <text class="setting-text">设置</text>
          </view>
          <image src="/static/images/right.png" class="setting-right-icon" />
        </navigator>
      </view>
      <view class="setting">
        <navigator
          url="/pages/my/other/feedback"
          open-type="navigate"
          hover-class="navigator-hover"
          class="setting-item"
        >
          <view class="setting-content">
            <image
              src="/static/images/customer_service.png"
              class="setting-icon"
            />
            <text class="setting-text">问题反馈</text>
          </view>
          <image src="/static/images/right.png" class="setting-right-icon" />
        </navigator>
        <navigator
          url="/pages/my/other/about"
          open-type="navigate"
          hover-class="navigator-hover"
          class="setting-item"
        >
          <view class="setting-content">
            <image src="/static/images/about_us.png" class="setting-icon" />
            <text class="setting-text">关于我们</text>
          </view>
          <image src="/static/images/right.png" class="setting-right-icon" />
        </navigator>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { useUserStore } from "@/stores";
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync();
const userStore = useUserStore();
</script>

<style scoped lang="scss">
.my {
  display: flex;
  flex-direction: column;
  background-color: #e1e1e1;
  height: 100vh;
  .hearder {
    background-image: url(@/static/images/navigator_bg.png);
    background-size: cover;
    position: relative;
    padding: 0px 0px 25px;

    .overview {
      display: flex;
      height: 120rpx;
      padding: 0 36rpx;
      color: #fff;

      .avatar {
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
        background-color: #eee;
      }

      .gray {
        filter: grayscale(100%);
      }

      .meta {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
        margin-left: 20rpx;

        .nickname {
          max-width: 250rpx;
          margin-bottom: 20rpx;
          font-size: 30rpx;
          line-height: 40rpx;
          font-weight: bold;

          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .introduction {
          max-width: 400rpx;
          font-size: 26rpx;
          color: #fff;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .extra {
          display: flex;
          font-size: 20rpx;
        }
      }
    }
  }

  .content {
    margin: 20rpx;
    .manage {
      display: flex;
      .manage-item {
        width: 150rpx;
        height: 150rpx;
        margin-right: 12rpx;
        border-radius: 16rpx;
        background-color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .manage-icon {
          width: 65rpx;
          height: 65rpx;
          padding: 10rpx;
          border-radius: 16rpx;
        }
        .manage-text {
          font-size: 23rpx;
          color: #333;
          margin-top: 12rpx;
          font-weight: bold;
        }
      }
    }
    .setting {
      margin-top: 20rpx;
      background-color: #fff;
      border-radius: 16rpx;
      .setting-item {
        padding: 20rpx 28rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .setting-content {
          display: flex;
          align-items: center;
          .setting-icon {
            width: 32rpx;
            height: 32rpx;
          }
          .setting-text {
            margin-left: 28rpx;
            font-size: 32rpx;
            color: #333;
            margin-top: -1rpx;
          }
        }
        .setting-right-icon {
          width: 32rpx;
          height: 32rpx;
        }
      }
    }
  }
}
</style>
